
<template>

  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical-demo"
    text-color="#000"
    active-text-color="red"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
    router
  >
  <el-scrollbar class="scrollbar-style" style="height:552px;">
    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;"> -->
    <!-- <el-radio-group v-model="isCollapse" size="mini" border="false" style="margin-bottom: 20px;"> -->
      <!-- <el-radio-button :label="false" @click="asideShow">展开</el-radio-button>
      <el-radio-button :label="true" @click="asideShow">收起</el-radio-button> -->
      <!-- <el-radio-button :label="collapseFalse(isCollapse)">展开</el-radio-button>
      <el-radio-button :label="collapseTrue(isCollapse)">收起</el-radio-button>-->
    <!-- </el-radio-group> -->
     <el-menu-item index="index">
        <i class="el-icon-monitor" style="color:#ffffff"></i>
        <span slot="title">系统首页</span>
      </el-menu-item>
    <el-submenu index="1" v-if="adminRole()">
      <template slot="title">
        <i class="el-icon-user" style="color:#ffffff"></i>
        <span slot="title">用户模块</span>
      </template>
      <el-menu-item index="userManagement">用户管理</el-menu-item>
      <el-menu-item index="passwdManagement">密码管理</el-menu-item>
      <el-menu-item index="roleManagement">角色管理</el-menu-item>
      <el-menu-item index="menuManagement">权限管理</el-menu-item>
    </el-submenu>
    <el-submenu index="courseManagement" v-if="adminRole()">
      <template slot="title">
        <i class="el-icon-collection" style="color:#ffffff"></i>
        <span slot="title">课程模块</span>
      </template>
      <el-menu-item index="courseManagement">课程管理</el-menu-item>
      <el-menu-item index="courseTypeManagement">课程类型</el-menu-item>
    </el-submenu>
    <el-submenu index="classManagement" v-if="adminRole()">
      <template slot="title">
        <i class="el-icon-school" style="color:#ffffff"></i>
        <span slot="title">班级模块</span>
      </template>
      <el-menu-item index="classManagement">班级管理</el-menu-item>
      <el-menu-item index="classTypeManagement">班级类型</el-menu-item>
      <el-menu-item index="quitClassManagement">退班管理</el-menu-item>
      <el-menu-item index="transferClassManagement">转班管理</el-menu-item>
      <el-menu-item index="termManagement">学期管理</el-menu-item>
    </el-submenu>
    <el-submenu index="attendanceManagement" v-if="adminRole()">
      <template slot="title">
        <i class="el-icon-date" style="color:#ffffff"></i>
        <span slot="title">考勤模块</span>
      </template>
      <el-menu-item index="attendanceManagement">考勤管理</el-menu-item>
      <el-menu-item index="askForLeaveManagement">请假管理</el-menu-item>
    </el-submenu>
    <!-- </el-submenu> -->

    <el-submenu index="2" v-if="adminRole()">
      <template slot="title">
        <i class="el-icon-edit-outline" style="color:#ffffff"></i>
        <span slot="title">分配模块</span>
      </template>
      <el-menu-item index="userRoleAllocation">用户角色分配</el-menu-item>
      <el-menu-item index="roleMenuAllocation">角色权限分配</el-menu-item>
      <el-menu-item index="teacherCourseAllocation">老师课程分配</el-menu-item>
      <el-menu-item index="studentClassAllocation">学生班级分配</el-menu-item>
      <el-menu-item index="classCourseAllocation">班级课程分配</el-menu-item>
    </el-submenu>
    <el-submenu index="3" v-if="adminRole()">
      <template slot="title">
        <i class="el-icon-document" style="color:#ffffff"></i>
        <span slot="title">分配信息</span>
      </template>
      <el-menu-item index="userRoleAlreadyInfo">用户角色信息</el-menu-item>
      <el-menu-item index="roleMenuAlreadyInfo">角色权限信息</el-menu-item>
      <el-menu-item index="studentClassAlreadyInfo">学生班级信息</el-menu-item>
      <el-menu-item index="classCourseAlreadyInfo">班级课程信息</el-menu-item>
      <el-menu-item index="teacherCourseAlreadyInfo">教师课程信息</el-menu-item>
    </el-submenu>
    <el-submenu index="4" v-if="adminRole()">
      <template slot="title">
        <i class="el-icon-office-building" style="color:#ffffff"></i>
        <span slot="title">就业模块</span>
      </template>
      <el-menu-item index="employmentManagement">就业登记信息</el-menu-item>
      <el-menu-item index="recommendManagement">就业推荐信息</el-menu-item>
    </el-submenu>
    <el-submenu index="5" v-if="adminRole()">
      <template slot="title">
        <i class="el-icon-wallet" style="color:#ffffff"></i>
        <span slot="title">费用模块</span>
      </template>
      <el-menu-item index="tuitionManagement">学费管理</el-menu-item>
      <el-menu-item index="returnClassTuition">退班费用</el-menu-item>
      <el-menu-item index="transferClassTuition">转班费用</el-menu-item>
      <el-menu-item index="chargeTypeManagement">费用类型</el-menu-item>
      <el-menu-item index="TermClassPriceManagement">班级价格</el-menu-item>
    </el-submenu>
    <div v-if="!adminRole()">
      <el-menu-item v-for="(item,i) in this.$store.state.roleMenu" :key="i" :index="item.menuPath">
        <i :class="item.menuIcon" style="color:#ffffff"></i>
        <span slot="title">{{item.menuName}}</span>
      </el-menu-item>
    </div>
    </el-scrollbar>
  </el-menu>

</template>
<style>
.el-scrollbar__wrap {
   /* overflow-x: hidden; */
}
.el-submenu__title:hover{
  background-color: #000 !important;
}
.el-menu-item.is-active{
  /* background-color: #7F7FD5 !important; */
}
.el-menu-item:hover{
  background-color: #000 !important;
  color: aliceblue !important;
}
.el-menu-vertical-demo{
  color: white;
  background-image: linear-gradient(#7F7FD5, #4286f4);

}
.el-menu-vertical-demo span+i{
  color: white;
}
.el-menu-vertical-demo span{
  color: white;
}
</style>
<style lang="scss" rel="stylesheet/scss">

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;

}

</style>
<script>
export default {
  name: 'AsideMenu',
  data () {
    return {
      isCollapse: false
    }
  },
  computed: {
    activeIndex () {
      return this.$route.path.replace('/', '')
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    asideShow () {
      this.$emit('show', { flag: 'true' })
    },
    adminRole () {
      if (this.$store.state.user.roleName === '管理员') {
        return true
      } else {
        return false
      }
    },
    studentRole () {
      if (this.$store.state.user.roleName === '学生') {
        return true
      } else {
        return false
      }
    },
    teacherRole () {
      if (this.$store.state.user.roleName === '老师') {
        return true
      } else {
        return false
      }
    }
  }
}
</script>
